<template>
  <div class="series-label-rooter">
    <div class="add_line">
      <el-button
        size="default"
        @click="addSerieLabel()"
      >
        <el-icon><Plus /></el-icon>
        {{ $demoi18n('btn.add') }}
      </el-button>
    </div>
    <table
      v-if="labels.length"
      class="echart_table labels_table"
    >
      <tr>
        <th style="width:30px"></th>
        <th></th>
        <th style="width:30px"></th>
      </tr>
      <tr
        v-for="(n, i) in labels"
        :key="i"
      >
        <td>{{ i + 1 }}</td>
        <td>
          <div class="forType">
            <ValueInputer
              v-model:value="n._forType"
              value-type="List"
              :enum-values="forTypes"
            />
            <div>
              <ValueInputer
                v-if="n._forType === 'serie_name'"
                v-model:value="n._serieName"
                :enum-values="serieNames"
                :placeholder="$demoi18n('echart.placeholder.plsEnterSerieName')"
                :rules="genRulesByKey('echart.series._labels.[x]._serieName')"
              />
            </div>
          </div>
        </td>
        <td>
          <div class="edit_btns">
            <el-button
              :link="true"
              type="primary"
              size="default"
              icon="Setting"
              @click="editSerieLabel(n)"
            ></el-button>
            <el-button
              :link="true"
              type="primary"
              size="default"
              icon="Delete"
              @click="delSerieLabel(n)"
            ></el-button>
          </div>
        </td>
      </tr>
    </table>

    <el-dialog
      v-model="dialogVisible"
      :title="$demoi18n('echart.dialog.editDataLabels')"
      width="380px"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :class="`${visualThemeClassName} ${xvueNameSpace}`"
      @close="cancelPopup()"
    >
      <div class="cont">
        <SeriesLabel
          :form="form"
          :index="curIndex"
        />
      </div>
      <template #footer>
        <span>
          <el-button
            size="small"
            @click="cancelPopup()"
          >{{ $demoi18n('btn.cancel') }}</el-button>
          <el-button
            type="primary"
            size="small"
            @click="submitPopup()"
          >
            {{ $demoi18n('btn.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import echartUtil from '@/components/common/echart/echart-util.js';
import echartDefault from '@/components/common/echart/echart-property-default.js';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import SeriesLabel from './series-label.vue';
import { serieLabelForTypes } from '@/components/common/echart/form-item-options.js';
import { $confirm } from '@/utils/util';

const dfSerieLabels = echartDefault.echart.series._labels;

export default {
  components: { SeriesLabel, ValueInputer },
  mixins: [EchartCommonMixin],
  props: {},
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      labels: JSON.parse(JSON.stringify(dfSerieLabels)),
      dialogVisible: false,
      curIndex: null,
      curItemBackup: {},
      isSummiting: false,
    };
  },
  computed: {
    forTypes() {
      let _forTypes = serieLabelForTypes;
      const _compName = this.form.echart._componentName;
      const comps = ['biaxial-single-line-bar', 'biaxial-line-bar'];

      // 关系图没有图例 不需要指定系列
      const hideSerieNameComps = ['relationship-diagram'];
      let arr = [];
      !hideSerieNameComps.includes(_compName) ? (arr = ['all', 'serie_name']) : (arr = ['all']);

      if (!comps.includes(_compName)) {
        _forTypes = serieLabelForTypes.filter(n => arr.includes(n.value));
      }
      return _forTypes;
    },
  },
  watch: {},
  created() {
    this.initLabels();
  },
  methods: {
    initLabels() {
      echartUtil.registerVar('echart.series._labels', this.form, this, []);
      this.labels = this.form.echart.series._labels;
    },
    addSerieLabel() {
      const labelItem = JSON.parse(JSON.stringify(dfSerieLabels[0]));
      this.labels.push(labelItem);
    },
    editSerieLabel(labelItem) {
      this.curIndex = this.labels.indexOf(labelItem);
      this.curItemBackup = JSON.parse(JSON.stringify(labelItem));
      this.dialogVisible = true;
    },
    delSerieLabel(labelItem) {
      $confirm(this.$demoi18n('echart.label.confirmDelte'), this.$demoi18n('popup.title.tips'), {
        confirmButtonText: this.$demoi18n('btn.confirm'),
        cancelButtonText: this.$demoi18n('btn.cancel'),
        type: 'warning',
      }).then(() => {
        const index = this.labels.indexOf(labelItem);
        this.labels.splice(index, 1);
      });
    },
    cancelPopup() {
      if (this.isSummiting) {
        return;
      }
      this.mergeObj(this.labels[this.curIndex], this.curItemBackup);
      this.dialogVisible = false;
    },
    submitPopup() {
      this.isSummiting = true;
      setTimeout(() => {
        this.isSummiting = false;
      }, 100);
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import '../less/echart-common.less';
.series-label-rooter {
  .labels_table {
    th,
    td {
      .forType {
        display: flex;
        justify-content: center;
        align-items: center;
        > * {
          padding-left: 5px;
          &:first-child {
            padding-left: 0;
          }
        }
      }
    }
    th {
      border-top: none;
      padding: 0;
    }
  }
}
</style>
